import styles from "@styles/whitelist/whitelistset.module.less";

import React, { useState, useEffect } from "react";
import { Button, Modal, Radio } from "antd";
import { withRouter, Link } from "react-router-dom";

import Http from "@utils/api";
import { filMenuState, filIsExpose } from "@actions/data";

function Whitelistset({ history, location }) {
  const {
    state: { activityBasicId },
  } = location;

  const [queryByActivityBasicId, setqueryByActivityBasicId] = useState({});
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [expose, setExpose] = React.useState(true);
  const [BasicId] = React.useState({
    activityBasicId: activityBasicId,
  });
  const [isSubmit, setisSubmit] = useState(false);

  // 显示弹层
  const showModal = () => {
    setIsModalVisible(true);
  };

  // 弹层 确认 按钮
  const handleOk = () => {
    setIsModalVisible(false);
    setisSubmit(true);
  };

  // 弹层 取消 按钮
  const handleCancel = () => {
    setIsModalVisible(false);
    setisSubmit(false);
    setExpose(queryByActivityBasicId.isEveryoneExpose);
  };

  // 修改公开方式
  const onChange = (e) => {
    setExpose(e.target.value);
  };

  const queryActiveBasic = () => {
    const body = { ...BasicId };
    Http.queryByActivityBasicId(body).then(({ data }) => {
      setqueryByActivityBasicId(data);
      setExpose(data.isEveryoneExpose);
    });
  };
  useEffect(() => {
    if (isSubmit) {
      const body = { ...BasicId };
      body.isEveryoneExpose = expose;
      Http.updateByCondition(body).then(({ data }) => {
        console.log(data);
        queryActiveBasic();
      });
    } else {
      queryActiveBasic();
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSubmit]);

  return (
    <article className={styles.whitelistset}>
      <section className={styles.resetTop}>
        <h1>设置白名单</h1>
        <ul className={styles.listinfo}>
          <li>
            <span>活动名称：</span>
            <p>{queryByActivityBasicId.activityName}</p>
          </li>
          <li>
            <span>活动状态：</span>
            <p>{filMenuState(queryByActivityBasicId.activityStatus || 0)}</p>
          </li>
          <li>
            <span>抽奖活动时间：</span>
            <p>
              {queryByActivityBasicId.startDate}&ensp;~&ensp;
              {queryByActivityBasicId.endDate}
            </p>
          </li>
          <li>
            <span>公开方式：</span>
            <p>
              {filIsExpose(queryByActivityBasicId.isEveryoneExpose)}
              <Button type="link" onClick={showModal}>
                修改
              </Button>
            </p>
          </li>
        </ul>
        <Modal
          title="修改公开方式"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          okText="确定"
          cancelText="取消"
        >
          <aside>
            公开方式：
            <Radio.Group onChange={onChange} value={expose}>
              <Radio value={true}>所有用户</Radio>
              <Radio value={false}>白名单用户</Radio>
            </Radio.Group>
          </aside>
        </Modal>
        {queryByActivityBasicId.isEveryoneExpose ? (
          <Button>
            <Link to="/lotteryWhiteList"> 返回 </Link>
          </Button>
        ) : (
          "白名单"
        )}
      </section>
    </article>
  );
}

export default withRouter(Whitelistset);
